<div class="row">
    <div class="col-md-6" ng-controller="InputController">
        <div class="panel panel-info">
            <div class="panel-heading">JSON</div>
            <div class="panel-body">
                <form class="form-horizontal" role="form" ng-submit="schemarize(inputJson, inputUrl)" ng-reset="reset();" id="home">
                    <div class="form-group">
                        <label for="inputUrl" class="col-sm-2 control-label">URL</label>
                        <div class="col-sm-10">
                            <input ng-model="inputUrl" type="url" class="form-control" id="inputUrl" placeholder="http://jsonschema.net">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputJson" class="col-sm-2 control-label">JSON</label>
                        <div class="col-sm-10">
                            <textarea ng-model="inputJson" class="form-control" id="inputJson" rows="12" placeholder="{ ... }"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Array options</label>
                        <div class="col-sm-10">
                            <div class="radio">
                                <label>
                                    <input type="radio" ng-model="arrayOptions" name="arrayOptions" id="emptySchema" value="emptySchema" checked>Empty schema
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" ng-model="arrayOptions" name="arrayOptions" id="singleSchema" value="singleSchema">Single schema
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" ng-model="arrayOptions" name="arrayOptions" id="arraySchema" value="schemaArray">Tuple typing
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">General options</label>
                        <div class="col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="includeDefaults">Include default values
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="includeEnums">Restrict values to enums
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="absoluteIds">Use absolute IDs
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="forceRequired">Force required
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="verbose">Verbose
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Format options</label>
                        <div class="col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="prettyPrint">Pretty print
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary btn-xs">Schemarize</button>
                            <button type="button" class="btn btn-default btn-xs" ng-click="reset()">Reset</button>
                        </div>
                    </div>
                </form>


            </div>
        </div>
    </div>

    <div class="col-md-6" ng-controller="OutputController">

        <div class="panel panel-success">
            <div class="panel-heading">Schema</div>
            <div class="panel-body">

            <div class="btn-group btn-toggle">
                <button href ng:click="setCodeView()" class="btn btn-xs btn-{{codeview}}">Code View</button>
                <button href ng:click="setEditView()" class="btn btn-xs btn-{{editview}}">Edit View</button>
            </div>

            <br />
            <br />
            <div ng:show="selected == 1">
                <schema class="rootSchema" data="data"></schema>
            </div>
            <div ng:show="selected == 2">
                <pre>{{datastr}}</pre>
            </div>
            </div>
        </div>
        <a ng-click="gotoTop()" class="btn btn-default btn-xs pull-right" role="button">Go to top</a>
    </div>

</div>
